<template>
    <div>
        <div class="sj_item" v-for="item in shop_fenlei_list" :key="item.id" @click="$router.push('/myshop');">
            <div class="left">
                <div>
                    <img :src="shop_img_baseURL+item.image_path" alt="">
                </div>
            </div>
            <div class="miden">
                <h1><span style="background-color: #ffda3e;">品牌</span>{{item.name}}</h1>
                <div>
                    <Start :rating="item.rating" :size="24" />
                    <span>{{item.rating}}</span>
                    <span>月售<span>{{item.rating_count}}</span>单</span>
                </div>
                <p>￥<span>{{item.float_minimum_order_amount}}</span>起送/配送费约￥<span>{{item.float_delivery_fee}}</span></p>
            </div>
            <div class="right">
                <div class="s">
                    <span>保</span><span>准</span><span>票</span>
                </div>
                <div class="x">
                    <span>硅谷专送</span>
                    <span>准时达</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Start from '../start/Start.vue'

    export default {
        data() {
            return {
                shop_img_baseURL: 'http://cangdu.org:8001/img/'
                // shop_img_baseURL: 'https://fuss10.elemecdn.com'
            }
        },
        computed: {
            ...mapState(['shop_fenlei_list'])
        },
        watch: {
        },
        components: {Start}

    }
</script>

<style src="../../assets/css/reset.css" scoped></style>
<style lang="stylus" scoped>
    .sj_item
        display flex
        height 110px
        &>div
            height 100%
        .left
            flex 2.3 !important
            display flex
            justify-content center
            align-items center
            div
                width 75px
                height 85px
                img
                    width 100%
                    height 100%
        .miden
            flex 4.7 !important 
            padding 13px 0 13px 10px
            white-space nowrap
            overflow hidden
            &>h1
                font-size 21px
                font-weight 800
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
                span
                    font-size 14px
                    vertical-align middle
                    font-weight 700
            &>div
                margin-top 17px
                font-size 10px
                display flex
            &>p
                margin-top 15px
                font-size 12px
                color #adadad
        .right
            position relative
            flex 3 !important
            .s
                position absolute
                top 14px
                right 8px
                span
                    font-size 12px
                    border 1px solid #cccc
                    color #bbbb
                    padding 0 2px 0 2px
                    &:nth-child(2),&:nth-child(3)
                        margin-left -1px
            .x
                position absolute
                top 14+35px
                right 8px
                span
                    font-size 12px
                    &:nth-child(1)
                        margin-right 5px
                        background-color #0ca979
                        color #fff
                    &:nth-child(2)
                        border 1px solid green

                        color green
</style>